<script setup>

import { reactive, toRefs, onMounted } from 'vue'
import api from '@/api'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/modules/user'

const user = useUserStore()
user.loadList()
    
const data = reactive({
    formData: {
        state: '0',
        parentId: '',
        clientId: '1',
        key: '',
        name: '',
        path: '',
        permission: '',
        sort: '',
        id: ''
    }
})

const submit = () => {
        
    switch (Number.parseInt(data.formData.state)) {
        case 0:
            api.post('api/mgr/menuAdd', data.formData)
                .then(res => {
                    if (res.c === 0) {
                        ElMessage({
                            message: '添加成功',
                            type: ''
                        })
                    } else {
                        ElMessage({
                            message: res.m,
                            type: 'error'
                        })
                    }
                })
            break
        case 1:
            api.post('api/mgr/menuEdit', data.formData)
                .then(res => {
                    if (res.c === 0) {
                        ElMessage({
                            message: '修改成功',
                            type: ''
                        })
                    } else {
                        ElMessage({
                            message: res.m,
                            type: 'error'
                        })
                    }
                })
            break
        case 2:
            api.post('api/mgr/menuDelete', data.formData)
                .then(res => {
                    if (res.c === 0) {
                        ElMessage({
                            message: '删除成功',
                            type: ''
                        })
                    } else {
                        ElMessage({
                            message: res.m,
                            type: 'error'
                        })
                    }
                })
            break
        default:
            break
    }
}

const { formSearch, tableData, formData, drawer } = toRefs(data)

</script>

<template>
    <div class="content">
        <page-main>
            <div id="form">
                <el-form>
                    <el-form-item label="操&nbsp&nbsp&nbsp作">
                        <el-select v-model="formData.state" placeholder="请选择操作">
                            <el-option label="增加" value="0" />
                            <el-option label="编辑" value="1" />
                            <el-option label="删除" value="2" />
                        </el-select>
                    </el-form-item>
                    <div v-if="data.formData.state === '0'">
                        <el-form-item label="父菜单">
                            <el-input  v-model="formData.parentId" />
                        </el-form-item>
                        <el-form-item label="客户端">
                            <el-select v-model="formData.clientId" placeholder="请选择客户端">
                                <el-option label="PC端" value="1" />
                                <el-option label="手机端" value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="菜单Key">
                            <el-input  v-model="formData.key" />
                        </el-form-item>
                        <el-form-item label="名&nbsp&nbsp&nbsp称">
                            <el-input  v-model="formData.name" />
                        </el-form-item>
                        <el-form-item label="路&nbsp&nbsp&nbsp径">
                            <el-input  v-model="formData.path" />
                        </el-form-item>
                        <el-form-item label="权&nbsp&nbsp&nbsp限">
                            <el-input  v-model="formData.permission" />
                        </el-form-item>
                        <el-form-item label="排&nbsp&nbsp&nbsp序">
                            <el-input  v-model="formData.sort" />
                        </el-form-item>
                    </div>

                    <div v-if="data.formData.state === '1'">
                        <el-form-item label="菜单ID">
                            <el-input  v-model="formData.id" />
                        </el-form-item>
                        <el-form-item label="父菜单">
                            <el-input  v-model="formData.parentId" />
                        </el-form-item>
                        <el-form-item label="菜&nbsp&nbsp&nbsp单Key">
                            <el-input  v-model="formData.key" />
                        </el-form-item>
                        <el-form-item label="名&nbsp&nbsp&nbsp称">
                            <el-input  v-model="formData.name" />
                        </el-form-item>
                        <el-form-item label="路&nbsp&nbsp&nbsp径">
                            <el-input  v-model="formData.path" />
                        </el-form-item>
                        <el-form-item label="权&nbsp&nbsp&nbsp限">
                            <el-input  v-model="formData.permission" />
                        </el-form-item>
                        <el-form-item label="排&nbsp&nbsp&nbsp序">
                            <el-input  v-model="formData.sort" />
                        </el-form-item>
                    </div>

                    <div v-if="data.formData.state === '2'">
                        <el-form-item label="删除ID">
                            <el-input  v-model="data.formData.id" />
                        </el-form-item>
                    </div>

                    <el-form-item>
                        <el-button type="primary" :loading="loading" @click="submit">提&nbsp;&nbsp;&nbsp;&nbsp;交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </page-main>
    </div>
</template>

<style>
   
</style>